<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07.移动端的适配</title>
    <style>
        /* 
        宽度的适配： 
             百分比 flex布局  vw
        高度适配
              vh
              rem单位
       适配方法： 
           1。选择标准 iphone5尺寸为例
           2. 页面宽度320px  字体大小 16px 即为 1rem = 16px  总宽度  20rem
           3. 由于iphone5的总宽度100% 是 20rem 所以我们认为 其他所有的设备总宽度都是20rem 
           4. 由于不同设备的宽度不同 但是都为20rem 所以 可以设置不同设备的根元素的字体大小 是不一样的
           iphone6/7/8  375px = 20rem   1rem = 375/20
            iphone6/7/8plus 414  = 20rem 1rem = 414/20 
        
        */
        @media only screen and (device-width:320px) {
            html {
                font-size: 16px;
            }
            
        }
        @media only screen and (device-width:375px) {
            html {
                font-size: 18.75px;
            }
            
        }
        @media only screen and (device-width:414px) {
            html {
                font-size: 20.7px;
            }
            
        }
        * {
            padding: 0;
            margin: 0;
        }
        .a {
            width: 20rem;
            height: 20rem;
            background-color: blue;
            font-size: 2rem;
        }

        img {
            width: 20rem;
            height: 20rem;
        }
    </style>
</head>
<body>

    <div class="a">
        南京市
    </div>
    <img src="./images/jz2.jpg" alt="" srcset="">
    
</body>
</html>